<template>
  <div id="app">
    <!-- 11 :value="inputValue"-->
    <!-- 12：@change="handleInputChange" -->
    <a-input
      placeholder="请输入任务"
      class="my_ipt"
      :value="inputValue"
      @change="handleInputChange"
    />
    <!-- 16-1-1完成添加事项的操作 -->
    <a-button type="primary" @click="addItemToList">添加事项</a-button>
    <!-- 8 通过dataSoure指定数据源 Store中state中list的数据源 -->
    <a-list bordered :dataSource="infolist" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 18-1-2动态绑定复选框的选中状态---:checked="item.done" -->
        <!-- 19-1-1修改任务事项完成状态---只要复选框的选中状态发生变化，就会调用change事件 -->
        <!-- 复选框 -->
        <a-checkbox
          :checked="item.done"
          @change="
            e => {
              cbStatusChanged(e, item.id)
            }
          "
          >{{ item.info }}</a-checkbox
        >
        <!-- 删除链接 -->
        <!-- 17-1-1 完成删除任务事项的操作 -->
        <a slot="actions" @click="removeItemById(item.id)">删除</a>
      </a-list-item>

      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <!-- 20-1-1-使用getters统计未完成的任务的条数--未完成的任务个数 -->
        <span>{{ unDoneLength }}条剩余</span>
        <!-- 操作按钮 -->
        <!-- 22-1-1动态按钮的高亮效果----click="changeList(参数) -->
        <a-button-group>
          <!-- 22-1-5动态按钮的高亮效果---- 根据不同的状态显示高亮兄啊过-->
          <!-- :type="viewKey === 'all' ? 'primary' : 'default'" -->
          <a-button
            :type="viewKey === 'all' ? 'primary' : 'default'"
            @click="changeList('all')"
            >全部</a-button
          >
          <a-button
            :type="viewKey === 'undone' ? 'primary' : 'default'"
            @click="changeList('undone')"
            >未完成</a-button
          >
          <a-button
            :type="viewKey === 'done' ? 'primary' : 'default'"
            @click="changeList('done')"
            >已完成</a-button
          >
        </a-button-group>
        <!-- 21-1-1清楚已完成的任务---把已经完成的任务清空 -->
        <a @click="clean">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>
// 7：按需导入
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'app',
  data() {
    return {}
  },
  //3： app组件渲染之后，就会调用这个getList，dispatch会调用actions中的方法
  created() {
    this.$store.dispatch('getList')
  },
  computed: {
    // 18-1-1----动态绑定复选框的选中状态---:checked="item.done"
    //18-1-1---通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：list: 使用组件能访问 State 中数据list
    // ...mapState(['list','inputValue'])
    // 10： 通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性(inputValue:)：
    // 22-1-4动态按钮的高亮效果---- 将当前组件需要的全局数据，映射为当前组件的 computed 计算属性(viewKey:)：
    ...mapState(['inputValue', 'viewKey']),
    // 18-1-1动态绑定复选框的选中状态---将全局数据，映射为当前组件的计算属性infolist"
    // 20-1-2-使用getters统计未完成的任务的条数---触发getters中的unDoneLength
    // 23-1-1实现列表数据的动态切换---对18-1-1做了升级,直接使用getters统计 全部.已完成,未完成得数据,将全局数据list，映射为当前组件的计算属性infolist"
    ...mapGetters(['unDoneLength', 'infolist'])
  },
  methods: {
    // 13： 监听文本框内容变化 ---只要事件发生了变化，就会拿到数据参数e，e.target.value可以拿到当前文本的最新的值
    handleInputChange(e) {
      console.log('来了')
      // 15：调用setInputValue方法，把表单中最新的值（e.target.value）赋值给全局数据（state.inputValue）
      this.$store.commit('setInputValue', e.target.value)
    },
    //16-1-2完成添加事项的操作---- 向列表中新增 item 项
    addItemToList() {
      if (this.inputValue.trim().length <= 0) {
        return this.$message.warning('文本框内容不能为空！')
      }
      // 16-1-3完成添加事项的操作---实现addItem方法
      this.$store.commit('addItem')
    },
    // 17-1-2 完成删除任务事项的操作 ---跟据Id删除对应的任务事项
    removeItemById(id) {
      // console.log(id)
      this.$store.commit('removeItem', id)
    },
    //  19-1-2修改任务事项完成状态---获得到最新的复选框的状态，获得对应的id值
    // 监听复选框选中状态变化的事件
    cbStatusChanged(e, id) {
      // 通过 e.target.checked 可以接受到最新的选中状态
      // console.log(e.target.checked)
      // console.log(id)
      const param = {
        id: id,
        status: e.target.checked
      }
      // 19-1-3修改任务事项完成状态---触发store.js中mutations中的changeStatus方法，把参数id和复选框状态传过去
      this.$store.commit('changeStatus', param)
    },
    // 21-1-2清楚已完成的任务---清除已完成的任务
    clean() {
      this.$store.commit('cleanDone')
    },
    // 22-1-2动态按钮的高亮效果----修改页面上展示的列表数据
    changeList(key) {
      // console.log(key)
      // 22-1-3动态按钮的高亮效果----触发store中的changeViewKey方法
      this.$store.commit('changeViewKey', key)
    }
  }
}
</script>

<style scoped>
#app {
  padding: 10px;
}

.my_ipt {
  width: 500px;
  margin-right: 10px;
}

.dt_list {
  width: 500px;
  margin-top: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
